<template>
  <div class="addCommon">
      <nav-bar title="Add a Reviews"></nav-bar>
      <form @submit.prevent class="form">
        <label>*Rating:</label>
        <rating v-model="rate"></rating>
        <label>Add a photo</label>
        <up-loader v-model="photos"></up-loader>
        <label>*Add a headLine:</label>
        <input @blur="reset" :class="[titleError != '' ? 'error' :'' ]" maxlength="10" type="text" v-model.trim="title">
        <div class="error-msg" v-show="titleError != ''">{{titleError}}</div>
        <label>*Write your review:</label>
        <textarea @blur="reset" :class="[contentError != '' ? 'error' :'' ]" maxlength="60" v-model.trim="content"></textarea>
        <div class="error-msg" v-show="contentError != ''">{{contentError}}</div>
        <button @click="submit">Submit</button>
      </form>
  </div>
</template>

<script>
import NavBar from "components/navBar/navBar"
import Rating from "components/rating/rating"
import UpLoader from "components/upload/upload"

import {addCommon} from "network/common"

/**
 *  有组件可以调用
 */
export default {
  data () {
    return {
        rate: 5,
        title: "",
        content: "",
        titleError: "",
        contentError: "",
        photos: []
    };
  },

  components: {
      NavBar,
      Rating,
      UpLoader
  },

  computed: {},

  methods: {
    reset(type){
        this.contentError = ""
        this.titleError = ""
    },
    submit(){
        if(this.validate()){
          let form = new FormData();
          form.append('rate', this.rate);
          // form.append('userId', this.$store.state.userId);
          this.photos.map(item => form.append('photo[]',item))
          addCommon(form).then((v) => {
            this.$router.back()
          })
        }
    },
    validate(){
      if(this.title === ""){
        this.titleError = "Please enter your headline"
        return false;
      }else{
        this.titleError = ""
      }
      if(this.content === ""){
        this.contentError = "Please enter your headline"
        return false;
      }else{
        this.contentError = ""
      }
      return true;
    }
  }
}

</script>
<style scoped>
    .form {
      display: flex;
      flex-direction: column;
      margin: 5px 20px;
    }

    label{
      color: #6B6A6F;
      font-size: 16px;
      margin: 14px 0px;
    }
    input,input:focus,textarea, textarea:focus{
      position: relative;
      border: 1px solid #E9E9E9;
      padding: 14px;
      font-size: 14px;
      border-radius: 8px;
    }

    input:focus,textarea:focus{
      border: 1px solid green;
    }

    .error{
      border: 1px solid red;
    }

    .error-msg{
      padding: 4px;
      color: red;
    }

    textarea, textarea:focus {
      height: 50px;
    }

    button {
      background-color: #24242C;
      border: none;
      color: white;
      padding: 20px;
      border-radius: 40px;
      margin-top:20px; 
    }

    button:active {
      color: #6B6A6F;
      background-color: #24242C;

    }
    
</style>